// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../lib' as r25;

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

// * -------------------------------------------------------------------------- */
// Nomination categories

.r25-c-category {
    @include text-body-lg;
    border-top: 1px solid fade-out($color-white, 0.8);
    padding: $layout-md 0;

    &:last-child {
        border-bottom: 1px solid fade-out($color-white, 0.8);
    }

    .r25-c-category-body {
        max-width: $content-md;
    }

    .r25-c-category-desc {
        @include text-body-xl;
        margin: 0;
    }

    .r25-c-category-expand {
        @include text-body-md;
        margin: $spacing-lg 0 $spacing-xl;
    }

    .r25-c-category-cta {
        .r25-c-button::after {
            content: " →";
        }
    }

    &:hover .r25-c-button {
        background: $color-white;
        color: $color-black;
    }

    @supports (background-clip: text) {
        .r25-c-category-title {
            display: inline-block;
            background-clip: text;
            color: #fff8;
        }
    }

    @media #{$mq-md} {
        column-gap: $layout-xl;
        display: flex;
        justify-content: space-between;

        .r25-c-category-expand {
            margin-bottom: 0;
        }
    }

    &.r25-t-orange {
        .r25-c-button {
            background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$orange, 0.6) 0%, $color-black 100%);
        }

        &:hover {
            background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$orange, 0.65) 6%, fade-out(r25.$orange, 1) 100%);

            .r25-c-button {
                background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$orange, 0.6) 0%, $color-white 100%);
            }
        }

        @supports (background-clip: text) {
            .r25-c-category-title {
                background-image: linear-gradient(to left, r25.$orange, $color-white);
            }
        }
    }

    &.r25-t-green {
        .r25-c-button {
            background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$green, 0.5) 0%, $color-black 100%);
        }

        &:hover {
            background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$green, 0.75) 6%, fade-out(r25.$green, 1) 100%);

            .r25-c-button {
                background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$green, 0.5) 0%, $color-white 100%);
            }
        }

        @supports (background-clip: text) {
            .r25-c-category-title {
                background-image: linear-gradient(to left, r25.$green, $color-white);
            }
        }
    }

    &.r25-t-purple {
        .r25-c-button {
            background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$purple, 0.5) 0%, $color-black 100%);
        }

        &:hover {
            background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$purple, 0.65) 6%, fade-out(r25.$purple, 1) 100%);

            .r25-c-button {
                background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$purple, 0.5) 0%, $color-white 100%);
            }
        }

        @supports (background-clip: text) {
            .r25-c-category-title {
                background-image: linear-gradient(to left, r25.$purple, $color-white);
            }
        }
    }

    &.r25-t-teal {
        .r25-c-button {
            background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$teal, 0.5) 0%, $color-black 100%);
        }

        &:hover {
            background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$teal, 0.55) 6%, fade-out(r25.$teal, 1) 100%);

            .r25-c-button {
                background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$teal, 0.5) 0%, $color-white 100%);
            }
        }

        @supports (background-clip: text) {
            .r25-c-category-title {
                background-image: linear-gradient(to left, r25.$teal, $color-white);
            }
        }
    }

    &.r25-t-red {
        .r25-c-button {
            background: $color-black radial-gradient(90% 500% at 90% 200%, fade-out(r25.$red, 0.5) 0%, $color-black 100%);
        }

        &:hover {
            background: radial-gradient(50% 150% at 50% 0, fade-out(r25.$red, 0.65) 6%, fade-out(r25.$red, 1) 100%);

            .r25-c-button {
                background: $color-white radial-gradient(90% 500% at 90% 200%, fade-out(r25.$red, 0.5) 0%, $color-white 100%);
            }
        }

        @supports (background-clip: text) {
            .r25-c-category-title {
                background-image: linear-gradient(to left, r25.$red, $color-white);
            }
        }
    }
}
